
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<link rel="stylesheet" href="/layui/css/layui.css">
<style>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		font-weight: 300;
	}

	body {
		font-family: 'Source Sans Pro', sans-serif;
		color: white;
		font-weight: 300;
	}

	body ::-webkit-input-placeholder {
		/* WebKit browsers */
		font-family: 'Source Sans Pro', sans-serif;
		color: white;
		font-weight: 300;
	}

	body :-moz-placeholder {
		/* Mozilla Firefox 4 to 18 */
		font-family: 'Source Sans Pro', sans-serif;
		color: white;
		opacity: 1;
		font-weight: 300;
	}

	body ::-moz-placeholder {
		/* Mozilla Firefox 19+ */
		font-family: 'Source Sans Pro', sans-serif;
		color: white;
		opacity: 1;
		font-weight: 300;
	}

	body :-ms-input-placeholder {
		/* Internet Explorer 10+ */
		font-family: 'Source Sans Pro', sans-serif;
		color: white;
		font-weight: 300;
	}

	.wrapper {
		background: #393D49 !important;
		background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
		background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
		opacity: 0.8;
		position: absolute;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.wrapper.form-success .container h1 {
		-webkit-transform: translateY(85px);
		-ms-transform: translateY(85px);
		transform: translateY(85px);
	}
	.container {
		max-width: 600px;
		margin: 0 auto;
		padding: 120px 0;
		height: 400px;
		text-align: center;
	}

	.container h1 {
		font-size: 40px;
		-webkit-transition-duration: 1s;
		transition-duration: 1s;
		-webkit-transition-timing-function: ease-in-put;
		transition-timing-function: ease-in-put;
		font-weight: 200;
	}
	.form {
		padding: 20px 0;
		position: relative;
	}
	.form input {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		outline: 0;
		border: 1px solid rgba(255, 255, 255, 0.4);
		background-color: rgba(255, 255, 255, 0.2);
		width: 250px;
		border-radius: 3px;
		padding: 10px 15px;
		margin: 0 auto 10px auto;
		display: block;
		text-align: center;
		font-size: 18px;
		color: white;
		-webkit-transition-duration: 0.25s;
		transition-duration: 0.25s;
		font-weight: 300;
	}
	.form input:hover {
		background-color: rgba(255, 255, 255, 0.4);
	}
	.form input:focus {
		background-color: white;
		width: 300px;
		color: #53e3a6;
	}

	.form button {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		outline: 0;
		background-color: white;
		border: 0;
		padding: 10px 15px;
		color: #53e3a6;
		border-radius: 3px;
		width: 120px;
		cursor: pointer;
		font-size: 18px;
		-webkit-transition-duration: 0.25s;
		transition-duration: 0.25s;
	}
	.form button:hover {
		background-color: rgba(255, 255, 255, 0.4);
		border-color: currentColor;
	}
</style>
</head>
<body>
	<!-- 代码 开始 -->
	<div class="wrapper">
		<div class="container">
			<h1>HK Proxy</h1>
			<div class="form">
				<input type="text" class="username" placeholder="用户名">
				<input type="password" class="password" placeholder="密码">
				<button type="submit" id="login-button">登录</button>
				<button type="register" id="register-button">注册</button>
			</div>
		</div>
	</div>
	<!-- 代码 结束 -->
</body>
<script src="/layui/layui.js"></script>
<script>
	layui.config({
		base: '/js/' //你存放新模块的目录，注意，不是 layui 的模块目录
	}).use('index'); //加载入口
	var form = layui.form,layer = layui.layer;$ = layui.jquery;
	$('#register-button').click(function (e){
		$.ajax({
			type : "POST",
			url : "/register",
			contentType : "application/json; charset=utf-8",
			data : JSON.stringify({
				username : $(".username").val(),
				password : $(".password").val()
			}),
			dataType : "json",
			success : function(data) {
				if (data.code == 200) {
					layer.msg(data.msg);
				}else {
					layer.msg(data.msg,{offset: "200px"})
				}
			},
			error : function(e) {
				layer.msg(e.responseJSON.msg,{ offset: "200px"})
			}
		});
	})
	$('#login-button').click(function(event) {
		$.ajax({
			type : "POST",
			url : "/login",
			contentType : "application/json; charset=utf-8",
			data : JSON.stringify({
				username : $(".username").val(),
				password : $(".password").val()
			}),
			dataType : "json",
			success : function(data) {
				if (data.code == 200) {
					//setCookie("token", data.data);
					// 添加全局请求头
					sessionStorage.setItem("Authorization",data.data);
					window.location.href = "/config/index.html";
				}
			},
			error : function(e) {
				layer.msg(e.responseJSON.msg,{ offset: $(window).height()- [$("#login-button").height(), $(window).width()-$("#login-button").width()]})
			}
		});
	});
	$(document).keyup(function(event) {
		if (event.keyCode == 13) {
			$("#login-button").trigger("click");
		}
	});
</script>
</html>